<!DOCTYPE html>
<html xmlns="http://xmlns.jcp.org/jsf/html">
<head>
    <title>商品</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../lib/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="../css/base.css?1289767">
    <link rel="stylesheet" href="../css/product.css?1443532">
    <link rel="stylesheet" href="../css/jquery-ui.min.css">
    <style type="text/css">
        html{
            touch-action: none
        }
        .bh-sku-selected {color: red;}
        .sku-params-button {
            height: 20px;
            border-width: 0px; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            outline: none;
        }
    </style>
</head>
<body>
<!--banner图开始-->
<div class="xyg-product-banner swiper-container">
    <div class="swiper-wrapper" id="itemImageList">

    </div>
    <div class="swiper-pagination"></div>
</div>
<!--banner图结束-->
<!--通知开始-->
<div class="xyg-product-note">
    <div class="xyg-product-note-content"><img src="../images/icon-tongzhi.png"/>下单后3个工作日处理</div>
    <!--<div class="xyg-product-note-time">
        进行中
    </div>-->
</div>
<!--通知结束-->
<!--内容开始-->
<div class="xyg-product-content">
    <div class="xyg-product-content-title" id="itemTitle"></div>
    <div class="xyg-product-content-price" id="price">
        ￥0
        <del>￥0</del>
        <!--<div onClick="goKeFu('${memberId}')"
             style="background: #343434; height: 30px; font-size: 14px; line-height: 30px; color: #fff; padding: 0px 10px; border-radius: 10px; float: right;">
            联系客服
        </div>-->
    </div>
    <div class="xyg-product-content-detail">

    </div>
</div>
<!--内容结束-->
<!--详情介绍开始-->
<div class="xyg-product-detail">
    <article class="weui-article">
        <!--${item.description}-->
        <!--<img src="../images/info.png?23233232322332"/>-->
    </article>
</div>
<div class="xyg_bottom"></div>
<!--详情介绍结束-->
<!--底部开始-->
<div class="xyg-product-footer">
    <div class="xyg-product-footer-tab1">
        <div class="xyg-product-footer-tab-center">
            <div class="xyg-product-footer-tab xyg-product-footer-tab1-pic" onClick="goFistPage()">
                <div class="xyg-product-footer-btn">
                    <img src="../images/icon_nav_frist.png?123" class="picture" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="xyg-product-footer-tab2">
        <div class="xyg-product-footer-tab-center">
            <div class="xyg-product-footer-tab xyg-product-footer-tab2-pic" onClick="showParams('1')">
                <input id="type" type="hidden">
                <div class="xyg-product-footer-text">
                    立即购买
                </div>
            </div>
        </div>
    </div>
    <div class="xyg-product-footer-tab3">
        <div class="xyg-product-footer-tab-center">
            <div class="xyg-product-footer-tab xyg-product-footer-tab3-pic">
                <!--onclick="productPutCart('${activity.id}','${memberId}','${item.id}','xyg-product-footer-btn-top-text')"-->
                <div class="xyg-product-footer-btn xyg-product-footer-tab3-pic-jia" onClick="showParams('2')">
                    <img src="../images/icon_jia.png?123" class="picture" alt="">
                </div>
                <div class="xyg-gwc xyg-product-footer-btn xyg-product-footer-tab3-pic-gwc" onClick="goCartPage()">
                    <div class="xyg-product-footer-btn-top-text">
                        2
                    </div>
                    <img src="../images/icon_gwc_3.png?123" class="picture-bottom" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="xyg-product-footer-tab4">
        <div class="xyg-product-footer-tab-center">
            <div class="xyg-product-footer-tab xyg-product-footer-tab4-pic" onClick="shareProduct('${member.unionid}','${item.id}','${activity.id}')">
                <div class="xyg-product-footer-btn">
                    <img src="../images/icon_nav_share.png?123" class="picture" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部结束-->

<!--选择开始-->
<div id="xyg-params" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="xyg-params-content">
            <img class="xyg-params-content-del" onClick="delPoupp()" src="../images/icon-del-buy.png"/>
            <div class="xyg-params-content-product">
                <div class="xyg-params-content-product-left">
                    <img id="itemImage" src=""/>
                </div>
                <div class="xyg-params-content-product-right">
                    <div class="xyg-params-content-product-right-title" id="itemTitleT"></div>
                    <div class="xyg-params-content-product-right-price" id="priceT">￥0</div>
                </div>
            </div>
            <div id="itemParamList">

            </div>
            <div class="xyg-params-content-num">
                <div class="xyg-params-content-num-title">
                    数量
                </div>
                <div class="xyg-params-content-num-content">
                    <div class="xyg-cart-list-content-text-num">
                        <div class="weui-count">
                            <a class="weui-count__btn weui-count__decrease">
                            </a>
                            <input class="weui-count__number" id="num" type="number" value="1"/>
                            <a class="weui-count__btn weui-count__increase">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="javascript:closePoupp();" class="weui-btn weui-btn_primary">确认</a>
        </div>
    </div>
</div>
<!--选择结束-->
</body>
<script src="../lib/jquery-2.1.4.js"></script>
<script src="../js/jquery-weui.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../fonts/iconfont.js"></script>
<script src="../lib/fastclick.js"></script>
<script src="../js/jquery-ui.min.js"></script>

<script src="../js/config.js"></script>
<script src="../js/base.js"></script>
<script src="../js/sku.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>

<script type="text/javascript">
    var itemId = getQueryString("itemId");
    var memberId = getMemberId();
    var keys = [];
    var data = {};
    if(!memberId){
        memberId = "1";
    }
    var itemSpecsList = [];
    $.ajaxSettings.async = false;
    // 获取商品信息
    $.get(baseURL + "api/item/info/"+itemId,"",function(res) {
        if (res.code == 0) {
            // 获取图片
            var item = res.item;
            var image = item.image;
            var imageArr = image.split(",");
            var str='';
            $.each(imageArr, function(index,value){
                str+='<div class="swiper-slide">\
                        <img src="'+value+'"/>\
                    </div>';
            });
            $("#itemImageList").html(str);
            // 图片
            $(".xyg-product-banner").swiper({
                loop: true,
                autoplay: 3000
            });
            // 标题,价格
            $("#itemImage").attr("src",imageArr[0]);
            $("#itemTitle").html(item.title);
            $("#price").html("￥"+item.prePrice+"<del>￥"+item.origPrice+"</del>");
            $("#itemTitleT").html(item.title);
            $("#priceT").html("￥"+item.prePrice);

            // 选择的属性
            var itemParamList = res.itemParamList;
            var str='';
            $.each(itemParamList,function (index, value) {
                str+='<div class="xyg-params-content-params">\
                    <div class="xyg-params-content-params-title">'+value.group+'</div>\
                    <div class="xyg-params-content-params-content">';
                var params = value.params;
                var key = [];
                $.each(params,function (index, value) {
                    key.push(value);
                    str+='<input type="button" style="margin-top:0px" class="weui-btn weui-btn_mini weui-btn_default sku" attr_id="'+value+'" value="'+value+'"/>';
                });
                keys.push(key);
                str+='</div></div>';
            });
            $("#itemParamList").html(str);
            // 规格库存的
            itemSpecsList = res.itemSpecsList;
            $.each(itemSpecsList,function (index, value) {
                var dataObj={};
                dataObj.id = value.id;
                dataObj.price = value.price;
                dataObj.count = value.stock;
                // 查询
                var paramData = value.paramData;
                var paramDataObj = eval("("+paramData+")");
                var strArr = [];
                $.each(paramDataObj, function (index, value) {
                    for(var i in value){
                        strArr.push(value[i]);
                    }
                });
                strArr.sort();
                data[strArr.join(";")]=dataObj;
            });
        }
    });
    $.ajaxSettings.async = true;
    initSKU();

    function showParams(type) {
        $("#type").val(type);
        $("#xyg-params").popup();
    }
    function delPoupp() {
        $.closePopup();
    }
    // 确认选择
    function closePoupp() {
        checkLogin(function () {
            // 获取数量及参数
            var type = $("#type").val();
            var num = $("#num").val();
            var specsSeq = "";
            var stockFlag = true;
            // 直接选择到id能否可行
            var selectedObjs = $('.bh-sku-selected');
            //获得组合key价格
            var selectedIds = [];
            var paramDataArr = [];
            if(selectedObjs.length >= keys.length) {
                selectedObjs.each(function () {
                    selectedIds.push($(this).attr('attr_id'));
                    paramDataArr.push($(this).attr('attr_id'));
                });
                selectedIds.sort();
            } else {
                $.toast("请选择商品参数！", "text");
                return false;
            }
            var selectIdStr = selectedIds.join(";");
            $.each(data,function (index, value) {
                // 查询
                if(index == selectIdStr){
                    if (value.stock * 1 < num * 1) {
                        stockFlag = false;
                    }
                    specsSeq = value.id;
                }
            });
            if (!stockFlag) {
                $.toast("您选择的商品库存不足！", "text");
                return false;
            }
            // console.log(paramDataArr.join(","));
            // 直接购买
            if (type == '1') {
                var arr = [];
                var obj = {};
                obj.itemId = itemId;
                obj.num = num;
                obj.paramData = paramDataArr.join(",");
                obj.specsSeq = specsSeq;
                arr.push(obj);
                // 跳转支付页面
                var orderItemJson = encodeURI(JSON.stringify(arr));
                window.location.href = "/mobile/view/addDetail.html?memberId=" + memberId + "&orderItemJson=" + orderItemJson + "&type=2";
            } else if (type == '2') {
                // 转至购物车
                $.showLoading("正在提交中");
                $.post(baseURL + "api/cart/add", {
                    memberId: memberId,
                    itemId: itemId,
                    buyNum: num,
                    specsId: specsSeq,
                    paramData: paramDataArr.join(",")
                }, function (resultInfo) {
                    if (resultInfo.code == 0) {
                        $.hideLoading();
                        cart();
                        $(".xyg-product-footer-btn-top-text").html(resultInfo.count);
                        $.closePopup()
                    } else {
                        $.hideLoading();
                        $.toast("商品添加购物车失败！", "text");
                    }
                }, "json");
            }
        });
    }

    function cart() {
        var cart = $('.xyg-gwc');
        var imgtodrag = $('.swiper-wrapper').find('img').eq(0);
        if (imgtodrag) {
            var imgclone = imgtodrag.clone().offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            }).css({
                'opacity': '0.5',
                'position': 'absolute',
                'height': '150px',
                'width': '150px',
                'z-index': '100'
            }).appendTo($('body')).animate({
                'top': cart.offset().top + 10,
                'left': cart.offset().left + 10,
                'width': 75,
                'height': 75
            }, 1000, 'easeInOutExpo');
            setTimeout(function () {
                cart.effect('shake', {times: 2}, 200);
            }, 1500);
            imgclone.animate({
                'width': 0,
                'height': 0
            }, function () {
                $(this).detach();
            });
        }
    }

    var MAX = 99, MIN = 1;
    $('.weui-count__decrease').click(function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") - 1
        if (number < MIN) number = MIN;
        $input.val(number)
    })
    $('.weui-count__increase').click(function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") + 1
        if (number > MAX) number = MAX;
        $input.val(number)
    })
</script>
</html>